<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Video Portal Example App</title>
  
  <!-- jQuery, required for the sample Component plugins -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

  <!-- Fabric core and Components CSS -->
  <link rel="stylesheet" type="text/css" href="../../css/fabric.css">
  <link rel="stylesheet" type="text/css" href="../../css/fabric.components.css">

  <!-- Application-specific CSS -->
  <link rel="stylesheet" href="css/VideoPortal.css">
</head>
<body>
  <div class="VideoPortal">
    <div class="VideoPortal-content">
    <!-- Host for NavBar component -->
      <div class="VideoPortal-navBar">
        <!-- Fabric NavBar component -->
        <div class="ms-NavBar">
          <div class="ms-NavBar-openMenu js-openMenu">
            <i class="ms-Icon ms-Icon--menu"></i>
          </div>
          <ul class="ms-NavBar-items">
            <li class="ms-NavBar-item ms-NavBar-item--search ms-u-hiddenSm">
              <div class="ms-TextField">
                <input class="ms-TextField-field">
              </div>
            </li>
            <li class="ms-NavBar-item"><a class="ms-NavBar-link" href="index.html">Home</a></li>
            <li class="ms-NavBar-item"><a class="ms-NavBar-link" href="channels.html">All Channels</a></li>
            <li class="ms-NavBar-item ms-NavBar-item--hasMenu">
              <a class="ms-NavBar-link" href="#">My Channels</a>
              <i class="ms-NavBar-chevronDown ms-Icon ms-Icon--chevronDown"></i>
              <ul class="ms-ContextualMenu">
                <li class="ms-ContextualMenu-item"><a class="ms-ContextualMenu-link" href="#">Employee interviews</a></li>
                <li class="ms-ContextualMenu-item"><a class="ms-ContextualMenu-link" href="#">Executive Briefings</a></li>
                <li class="ms-ContextualMenu-item"><a class="ms-ContextualMenu-link" href="#">Web Tech Talks</a></li>
              </ul>
            </li>
            <li class="ms-NavBar-item ms-NavBar-item--right"><i class="ms-Icon ms-Icon--upload"></i> Upload</li>
          </ul>
        </div>
      </div>
      <div class="VideoPortal-page ChannelPage">
        <!-- Spotlight content -->
        <div class="SpotLight-container">
          <div class="u-contentCenter">
              <!-- Use the responsive grid to arrange spotlight video items,
                   as well as the text and images within each item.
               -->
             <div class="SpotLightList ms-Grid">
              <div class="ms-Grid-row ms-u-hiddenMdDown">
                  <h2 class="SpotLight-title ms-font-xxl ms-fontColor-white">Popular Videos</h2>
              </div>
              <div class="ms-Grid-row">
                <div class="SpotLight-item ms-u-sm12 ms-u-md6 ms-u-lg4">
                  <div class="SpotLight-thumb">
                    <a href="player.html" class="SpotLight-thumbLink">
                      <img class="SpotLight-thumbImg" src="http://lorempixel.com/960/540/business/7" title="Azure Media Services Overview" alt="Azure Media Services Overview">
                    </a>
                  </div>
                  <div class="SpotLight-text ms-font-s-plus">
                    <a href="player.html">
                      <span class="SpotLight-videoTitle">Dynamically procrastinate B2C users after installed base benefits</span>
                      <span class="SpotLight-videoLength">10:28</span>
                    </a>
                  </div>
                </div>                
                <div class="SpotLight-item ms-u-sm12 ms-u-md6 ms-u-lg4">
                  <div class="SpotLight-thumb">
                    <a href="player.html" class="SpotLight-thumbLink">
                      <img class="SpotLight-thumbImg" src="http://lorempixel.com/960/540/business/5" title="Azure Media Services Overview" alt="Azure Media Services Overview">
                    </a>
                  </div>
                  <div class="SpotLight-text ms-font-s-plus">
                    <a href="player.html">
                      <span class="SpotLight-videoTitle">Dramatically maintain clicks-and-mortar solutions</span>
                      <span class="SpotLight-videoLength">3:49</span>
                    </a>
                  </div>
                </div>
                <div class="SpotLight-item ms-u-sm12 ms-u-md6 ms-u-lg4">
                  <div class="SpotLight-thumb">
                    <a href="player.html" class="SpotLight-thumbLink">
                      <img class="SpotLight-thumbImg" src="http://lorempixel.com/960/540/business/4" title="Azure Media Services Overview" alt="Azure Media Services Overview">
                    </a>
                  </div>
                  <div class="SpotLight-text ms-font-s-plus">
                    <a href="player.html">
                      <span class="SpotLight-videoTitle">Seamlessly visualize quality intellectual capital </span>
                      <span class="SpotLight-videoLength">1:56</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Main page content -->
        <div class="ChannelPage-content u-contentCenter">
          <div class="ChannelPage-contentCell ms-Grid">
            <div class="ChannelPage-pivots">
              <ul class="ms-Pivot">
                  <li class="ms-Pivot-link is-selected">Popular</li>
                  <li class="ms-Pivot-link">All Videos</li>
                  <li class="ms-Pivot-link">My Videos</li>

              </ul>
            </div>
            
            <div class="ChannelPage-videos VideoList">
          <div class="ms-Grid-row">
                <div class="VideoList-item ms-Grid-col ms-Grid ms-u-sm12 ms-u-md6 ms-u-lg4 ms-u-xl3">
                  <div class="ms-Grid-row">
                    <div class="VideoList-thumb ms-Grid-col ms-u-sm12 ms-u-lg12">
                      <a href="player.html" class="VideoList-thumbLink">
                        <img class="VideoList-thumbImg" src="http://lorempixel.com/300/168/business/5" alt="Video Title">
                        <span class="VideoList-thumbCaption">3:49</span>   
                      </a>
                    </div>
                    <div class="VideoList-text ms-Grid-col ms-u-sm12 ms-u-lg12">
                      <a href="player.html"><span class="VideoList-title ms-font-m-plus" title="Dramatically maintain clicks-and-mortar solutions.">Dramatically maintain clicks-and-mortar solutions</span></a>
                      <span class="VideoList-viewCount ms-font-s-plus ms-fontColor-neutralSecondaryAlt">946 views</span>
                    </div>
                  </div>
                </div>

                <div class="VideoList-item ms-Grid-col ms-Grid ms-u-sm12 ms-u-md6 ms-u-lg4 ms-u-xl3">
                  <div class="ms-Grid-row">
                    <div class="VideoList-thumb ms-Grid-col ms-u-sm12 ms-u-lg12">
                      <a href="player.html" class="VideoList-thumbLink">
                        <img class="VideoList-thumbImg" src="http://lorempixel.com/300/168/business/6" alt="Video Title">
                        <span class="VideoList-thumbCaption">8:35</span>   
                      </a>
                    </div>
                    <div class="VideoList-text ms-Grid-col ms-u-sm12 ms-u-lg12">
                      <a href="player.html"><span class="VideoList-title ms-font-m-plus" title="Dynamically innovate resource-leveling customer service">Dynamically innovate resource-leveling customer service</span></a>
                      <span class="VideoList-viewCount ms-font-s-plus ms-fontColor-neutralSecondaryAlt">92 views</span>
                    </div>
                  </div>
                </div>

                <div class="VideoList-item ms-Grid-col ms-Grid ms-u-sm12 ms-u-md6 ms-u-lg4 ms-u-xl3">
                  <div class="ms-Grid-row">
                    <div class="VideoList-thumb ms-Grid-col ms-u-sm12 ms-u-lg12">
                      <a href="player.html" class="VideoList-thumbLink">
                        <img class="VideoList-thumbImg" src="http://lorempixel.com/300/168/business/7" alt="Video Title">
                        <span class="VideoList-thumbCaption">10:28</span>   
                      </a>
                    </div>
                    <div class="VideoList-text ms-Grid-col ms-u-sm12 ms-u-lg12">
                      <a href="player.html"><span class="VideoList-title ms-font-m-plus" title="Dynamically procrastinate B2C users after installed base benefits">Efficiently procrastinate B2C users after installed base benefits</span></a>
                      <span class="VideoList-viewCount ms-font-s-plus ms-fontColor-neutralSecondaryAlt">499 views</span>
                    </div>
                  </div>
                </div>

                <div class="VideoList-item ms-Grid-col ms-Grid ms-u-sm12 ms-u-md6 ms-u-lg4 ms-u-xl3">
                  <div class="ms-Grid-row">
                    <div class="VideoList-thumb ms-Grid-col ms-u-sm12 ms-u-lg12">
                      <a href="player.html" class="VideoList-thumbLink">
                        <img class="VideoList-thumbImg" src="http://lorempixel.com/300/168/business/8" alt="Video Title">
                        <span class="VideoList-thumbCaption">6:32</span>   
                      </a>
                    </div>
                    <div class="VideoList-text ms-Grid-col ms-u-sm12 ms-u-lg12">
                      <a href="player.html"><span class="VideoList-title ms-font-m-plus" title="Completely synergize resource sucking relationships.">Completely synergize resource sucking relationships</span></a>
                      <span class="VideoList-viewCount ms-font-s-plus ms-fontColor-neutralSecondaryAlt">378 views</span>
                    </div>
                  </div>
                </div>                 

                <div class="VideoList-item ms-Grid-col ms-Grid ms-u-sm12 ms-u-md6 ms-u-lg4 ms-u-xl3">
                  <div class="ms-Grid-row">
                    <div class="VideoList-thumb ms-Grid-col ms-u-sm12 ms-u-lg12">
                      <a href="player.html" class="VideoList-thumbLink">
                        <img class="VideoList-thumbImg" src="http://lorempixel.com/300/168/business/1" alt="Video Title">
                        <span class="VideoList-thumbCaption">10:45</span>   
                      </a>
                    </div>
                    <div class="VideoList-text ms-Grid-col ms-u-sm12 ms-u-lg12">
                      <a href="player.html"><span class="VideoList-title ms-font-m-plus" title="Seamlessly visualize quality intellectual capital ">Seamlessly visualize quality intellectual capital </span></a>
                      <span class="VideoList-viewCount ms-font-s-plus ms-fontColor-neutralSecondaryAlt">345 views</span>
                    </div>
                  </div>
                </div>

                <div class="VideoList-item ms-Grid-col ms-Grid ms-u-sm12 ms-u-md6 ms-u-lg4 ms-u-xl3">
                  <div class="ms-Grid-row">
                    <div class="VideoList-thumb ms-Grid-col ms-u-sm12 ms-u-lg12">
                      <a href="player.html" class="VideoList-thumbLink">
                        <img class="VideoList-thumbImg" src="http://lorempixel.com/300/168/business/2" alt="Video Title">
                        <span class="VideoList-thumbCaption">2:59</span>   
                      </a>
                    </div>
                    <div class="VideoList-text ms-Grid-col ms-u-sm12 ms-u-lg12">
                      <a href="player.html"><span class="VideoList-title ms-font-m-plus" title="Synergizing across organizations">Synergizing across organizations</span></a>
                      <span class="VideoList-viewCount ms-font-s-plus ms-fontColor-neutralSecondaryAlt">66 views</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Fabric jQuery plugin for NavBar component -->
  <script src="../../components/NavBar/Jquery.Navbar.js"></script>
  <script>
    $(document).ready(function() {
        // Invoke the NavBar jQuery plugin if it's available
        if ($.fn.NavBar) {
          $('.ms-NavBar').NavBar();
        }
    });
  </script>
</body>
</html>